<template>
  <div class="content-x">
    <el-row type="flex" class="row-bg" justify="end">
      <div class="border-style">
        <el-radio v-model="radio1" label="02">医保</el-radio>
        <el-radio v-model="radio1" label="03">新农合</el-radio>
      </div>
      <div class="mar-right-l"></div>
      <div>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </div>
      <div class="mar-right-l"></div>
      <el-button @click="query" type="success" round>查询</el-button>
      <div class="mar-right-l"></div>
    </el-row>
    <el-divider></el-divider>
    <div>
      <el-table
        :data="tableData"
        :height="tableHeight"
        size="small"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="ptName"
          label="病人姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="ptIoNo"
          label="门诊号"
          width="120">
        </el-table-column>
        <el-table-column
          prop="visitDeptName"
          label="就诊科室"
          width="120">
        </el-table-column>
        <el-table-column
          prop="visitTime"
          label="就诊时间"
          width="140">
        </el-table-column>
        <el-table-column
          prop="diagnoseName"
          label="诊断"
          width="100">
        </el-table-column>
        <el-table-column
          prop="yzb"
          label="药占比"
          width="100">
        </el-table-column>
        <el-table-column
          prop="jyFeeSum"
          label="基本药物"
          width="100">
        </el-table-column>
        <el-table-column
          prop="zdjkFeeSum"
          label="重点监控"
          width="100">
        </el-table-column>
         <el-table-column
          prop="fzFeeSum"
          label="辅助用药"
          width="100">
        </el-table-column>
         <el-table-column
          prop="kssFeeSum"
          label="抗生素"
          width="100">
        </el-table-column>
        <el-table-column
          prop="xyFeeSum"
          label="西药费"
          width="100">
        </el-table-column>
        <el-table-column
          prop="cyFeeSum"
          label="成药费"
          width="100">
        </el-table-column>
        <el-table-column
          prop="zyFeeSum"
          label="草药费"
          width="100">
        </el-table-column>
        <el-table-column
          prop="jcFeeSum"
          label="检查"
          width="100">
        </el-table-column>
        <el-table-column
          prop="lisFeeSum"
          label="检验"
          width="100">
        </el-table-column>
        <el-table-column
          prop="qtFeeSum"
          label="其他"
          width="100">
        </el-table-column>
        <el-table-column
          prop="feeSum"
          label="总费用"
          width="100">
        </el-table-column>
        <!-- <el-table-column
          label="操作"
          width="120">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="deleteRow(scope.$index, tableData)"
              type="text"
              size="small">
              查看明细
            </el-button>
          </template>
        </el-table-column> -->
      </el-table>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import { getOutpatientMiChargeDtoList } from '../../api/charge'

export default {
  data () {
    return {
      radio1: '02',
      tableHeight: window.innerHeight - 214,
      value1: [moment().subtract(30, 'days'), new Date()],
      tableData: []
    }
  },
  methods: {
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    loadTableData () {
      getOutpatientMiChargeDtoList({
        type: this.radio1,
        startDt: moment(this.value1[0]).format('yyyy-MM-DD'),
        endDt: moment(this.value1[1]).format('yyyy-MM-DD' + ' 23:59:59')
      }).then(res => {
        res.forEach(item => {
          item.visitTime = moment(item.visitTime).format('yyyy-MM-DD HH:mm:ss')
        })
        this.tableData = res
      })
    },
    query () {
      this.loadTableData()
    }
  },
  mounted () {
    this.loadTableData()
  }
}
</script>

<style lang="scss">
  .content-x {
    margin-top: 20px;
    line-height: 40px;
    text-align: center;

    .border-style {
      border-radius: 30px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
      padding-left: 16px;
      padding-right: 16px;
    }

    .mar-right-l {
      margin-right: 20px;
    }
  }
</style>
